import React from 'react';
import ReactDOM from 'react-dom';
import Parent  from './parent';

// 1. 创建Provider和Consumer
const { Provider, Consumer } =  React.createContext()

// 2. 导出 Consumer 供其他组件使用
export default Consumer

class App extends React.Component { 
  state = {
    num: 0
  }
  add = (s = 1) => {
    this.setState({ num: this.state.num + s})
  }

  render() { 
    return (
        // 3. 在根组件中用Provider的value属性来传递参数
        //    此时传递的是一个对象: 
        <Provider value={ {num: this.state.num, other:1, add: this.add} }>
            <div>
                根组件
                <input 
                    type="text"
                    value={this.state.num} 
                    onChange={(e) =>this.setState({num: e.target.value})}/>
                {this.state.num}
                <Parent></Parent>
            </div>
        </Provider>
    )
  } 
} 


ReactDOM.render(
<div>
  <App />
</div>, document.getElementById('root')) 